<template>
  <base-breadcrumb :title="$route.meta.title">
    <!--方案编制模板and技术交底模板 -->
    <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :rules="type == 'look' ? {} : rules">
      <a-spin :spinning="loading">
        <!-- 表格 -->
        <a-card :bordered="false">
          <title-name title="基础信息"></title-name>
          <custom-form :formList="formList" :form="form" :is-emit="false" :editModel="type !== 'look' ? '' : ''">
            <template v-slot:technicalId>
              <a-form-model-item label="技术方案分类" prop="technicalId">
                <div :class="type !== 'look'?'technicalName':''">
                  <BaseInput class="BaseInput" v-model="form.technicalName" disabled />
                  <a-button v-if="type !== 'look'" type="primary" @click="openModal" style="margin-left: 10px">选择</a-button>
                </div>
              </a-form-model-item>
            </template>
          </custom-form>
        </a-card>
        <a-card :bordered="false">
          <title-name title="相关附件"></title-name>
          <UploadTableNew ref="uploadTable" :mode="'add'" :useLook="false" :init-file-list="fileInfoVOList" business-code="PM31" :disabled="type === 'look'" />
        </a-card>
        <!-- 页脚操作栏 -->
        <div class="btn_box page-btn-right-top" v-if="type !== 'look'">
          <a-button class="button_right" type="primary" :loading="loadingBtn.SUBMITTED" @click="handleSubmit('SUBMITTED')">提交</a-button>
          <a-button @click="handleActiveClose">关闭</a-button>
        </div>
        <div class="btn_box page-btn-right-top" v-else>
          <a-button @click="handleActiveClose">关闭</a-button>
        </div>
      </a-spin>
    </a-form-model>
    <SelectTechnicalClass :visible="visible" :projectQualityTypeId.sync="form.projectQualityTypeId" @cancel="confirm"></SelectTechnicalClass>
  </base-breadcrumb>
</template>

<script>
import { findListByMainAdd, findListByMainEdit, findListByMainDetail } from '@/api/technical/planHighlights' // api
import { getTechnicalProgramTypeById } from '@/api/technology'
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import SelectProjectType from '@/components/Select/SelectProjectType' // 工程类别
import SelectTreeSubItem from '@/components/Select/SelectTreeSubItem'
import SelectTechnicalClass from './../../Approval/selectTechnicalClass'   //技术方案分类
export default {
  name: 'a' + Date.now(),
  extends: new BaseEditPage(),
  data() {
    return {
      type: null, // 类型
      activeKey: null, // 激活的组件
      loading: false, // 加载控件
      visible: false, // 加载控件
      form: { fileName: null, projectQualityTypeId: null, technicalId: null, partId: null, uploadUserName: null, uploadDate: null, technicalName: null }, // 表单
      id: '',
      loadingBtn: {
        DELETE: false,
        DRAFT: false,
        SUBMITTED: false,
        REJECTED: false
      },
      rules: {
        fileName: [{ required: true, message: '请输入', trigger: 'blur' }],
        projectQualityTypeId: [{ required: true, message: '请选择', trigger: 'change' }],
        technicalId: [{ required: true, message: '请选择', trigger: 'change' }],
        partId: [{ required: true, message: '请选择', trigger: 'change' }]
      }, // 校验规则
      fileInfoVOList: [], //上传附件
      projectTypeArr: [] //数据
    }
  },
  watch: {},
  components: {
    SelectProjectType,
    SelectTreeSubItem,
    SelectTechnicalClass
  },
  async created() {},
  async mounted() {
    this.type = this.$route.query.type
    this.activeKey = this.$route.query.activeKey
    await this.getDetailData()
  },
  computed: {
    formList() {
      return [
        {
          keyName: 'fileName',
          type: 'BaseInput',
          disabled: this.type === 'look',
          label: '文件名称'
        },
        {
          keyName: 'projectQualityTypeId',
          viewName: 'projectQualityTypeName',
          type: SelectProjectType,
          disabled: this.type === 'look',
          label: '工程类别',
          change: () => {
            this.form.technicalId = null
            this.form.technicalName = null
            this.form.partId = null
            // this.getTechnicalClassArr()
          },
          getOptions: e => {
            this.projectTypeArr = e
          }
        },
        {
          slot: true,
          customItemSlot: true,
          label: '技术方案分类',
          keyName: 'technicalId'
        },
        {
          keyName: 'partId',
          viewName: 'partName',
          type: SelectTreeSubItem,
          disabled: this.type === 'look',
          label: '分部分项',
          attrs: {
            typeId: this.form.projectQualityTypeId,
            fatherDisabled: true
          },
          change: (value, labels) => {
            this.form.partName = labels[0]
          }
        },
        {
          keyName: 'uploadUserName',
          type: 'a-input',
          disabled: true,
          label: '上传人'
        },
        {
          keyName: 'uploadDate',
          type: 'a-date-picker',
          disabled: true,
          label: '上传时间',
          attrs: {
            valueFormat: 'YYYY-MM-DD'
          }
        }
      ]
    }
  },
  methods: {
    /**
     * 获取详情
     * @param
     */
    getDetailData() {
      // 不为添加时请求详情
      if (this.type !== 'add') {
        this.loading = true
        console.log('this.idthis.id', this.id)
        findListByMainDetail(this.id)
          .then(res => {
            this.loading = false
            this.form = { ...this.form, ...res.data }
            this.fileInfoVOList = res.data.fileInfoVOList
            this.getTechnicalClassArr()
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        this.form.uploadUserName = JSON.parse(sessionStorage.getItem('ycloud-user_info'))?.name // 默认填报人
        this.form.uploadDate = this.$dateFormat(new Date(), 'D') // 默认填报时间
      }
    },
    /**
     * 技术方案分类 打开
     * @param
     */
    openModal() {
      if (!this.form.projectQualityTypeId){
        this.$message.warning('请选择工程类别');
        return false
      }
      this.visible = true
    },
    /**
     * 技术方案分类 确定
     * @param
     */
    confirm(flag, data) {
      this.visible = false
      if (data) {
        this.form.technicalName = data.partialInfo
        this.form.technicalId = data.id
      }
    },
    /**
     * 校验
     * @param
     */
    validateForm() {
      let flag = false
      this.$refs.ruleForm.validate(e => {
        if (e) {
          flag = true
        } else {
          this.$message.warning('请填写完所有必填项信息')
        }
      })
      return flag
    },

    /**
     * 提交表单
     */
    handleSubmit(status) {
      if (status == 'SUBMITTED' && !this.validateForm()) {
        return
      }
      if (this.fileInfoVOList?.length < 1) {
        this.$message.warning('请上传附件')
        return
      }
      this.loading = true
      this.loadingBtn[status] = true
      setTimeout(() => {
        this.loading = false
        this.loadingBtn[status] = false
      }, 3000)
      let form = this.$clone(this.form)
      form.typeId = this.activeKey === '2' ? 0 : 1

      let projectTypeArr = this.projectTypeArr.filter(v => form.projectQualityTypeId === v.projectTypeId)
      form.projectQualityTypeName = projectTypeArr[0].projectTypeName

      form.fileInfoVOList = this.fileInfoVOList
      let api = { add: findListByMainAdd, edit: findListByMainEdit }[this.type]
      api(form)
        .then(() => {
          this.loading = false
          this.loadingBtn[status] = false
          this.$message.success(status == 'SUBMITTED' ? '提交成功！' : '保存成功')
          this.$multiTab.close()
        })
        .catch(() => {
          this.loadingBtn[status] = false
          this.loading = false
          this.$message.warning(err.data.message)
        })
    }
  }
}
</script>
<style lang="less" scoped>
.technicalName {
  display: flex;
  .BaseInput{
    width: 80%;
  }
}
</style>
